(function() {
    function custom_modal(template, okCallback, cancelCallback) {
        // Create modal HTML
        const modalHtml = `
        <div id="customModal" style="
            position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
            background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; 
            z-index: 1000;">
            <div style="
                background: white; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
                padding: 20px; max-width: 80%; width: 500px;">
                ${template}
                <div style="text-align: right; margin-top: 10px;">
                    <button id="okButton" style="font-weight: bolder; font-size:larger;
                        background: #2fcb71; color: white; border: none; border-radius: 4px; 
                        padding: 12px 25px; cursor: pointer; margin-right: 10px;">YES</button>
                    <button id="cancelButton" style="font-weight: bolder; font-size:larger;
                        background: #6c757d; color: white; border: none; border-radius: 4px; 
                        padding: 12px 25px; cursor: pointer;">NO</button>
                </div>
            </div>
        </div>`;

        // Append modal to body
        document.body.insertAdjacentHTML('beforeend', modalHtml);

        // Add event listeners
        document.getElementById('okButton').addEventListener('click', function() {
            document.getElementById('customModal').remove();
            if (typeof okCallback === 'function') okCallback();
        });

        document.getElementById('cancelButton').addEventListener('click', function() {
            document.getElementById('customModal').remove();
            if (typeof cancelCallback === 'function') cancelCallback();
        });
    }

    // Expose the function globally
    window.custom_modal = custom_modal;
})();
